<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            /* 设置或检索是否允许用户选中文本 */
            user-select: none;
        }
        .box{
            width: 600px;
            height: 400px;
            border:1px solid red;
            position: relative;
            margin-left: 50px;
            margin-top: 100px;
        }
        .box .ball{
            width: 18px;
            height: 18px;
            background: url(images/ball.png);
            position: absolute;
            left: 291px;
            bottom: 22px;
        }
        .box .board{
            position: absolute;
            left: 249px;
            bottom: 0;
            background: url(images/paddle.png);
            width: 102px;
            height: 22px;
        }
        .bricks_box .brick{
            width: 50px;
            height: 20px;
            background: url(images/block_01.png);
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 小球 -->
        <div class="ball"></div>
        <!-- 挡板 -->
        <div class="board"></div>

        <div class="bricks_box">
            <!-- <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div>
            <div class="brick"></div> -->
        </div>
    </div>

    <script>
        // 设置相关变量
        var ball = document.querySelector(".ball");
        var box = document.querySelector(".box");
        var board = document.querySelector(".board");

        var boxWidth = box.offsetWidth, boxHeight = box.offsetHeight;
        var ballWidth = ball.offsetWidth,ballHeight = ball.offsetHeight;
        var boardWidth = board.offsetWidth, boardHeight = board.offsetHeight;
        
        // 求出-5到5之间的随机一个数,包括了0
        var speedX = Math.floor( Math.random()*(15-5+1)+5) - 10;

        // 如果速度为0
        while( speedX == 0 ){
            // 重新获取-5到5之间的随机一个数,包括了0
            speedX = Math.floor( Math.random()*(15-5+1)+5) - 10;
            // 如果当前获取的值不是0,那么跳出循环
            if( speedX !=0 ){
                break;
            }
        }
        // 垂直运动速度
        var speedY = Math.floor( Math.random()*(2-0+1)+0)  - 5 ;
        
        var timer = setInterval( function(){
            // 小球垂直方向的移动
            if( ball.offsetTop >= boxHeight - boardHeight ){// 判断游戏是否结束
                // alert("游戏结束");
                console.log("游戏结束");

                clearInterval( timer );
                // 解绑相应的属性
                board.onmousedown = null;
                document.onmousemove = null;

                return false;
            }
            
            if( ball.offsetTop < 0 ){
                speedY *= -1;
            }

            // 判断球是否碰到了挡板
            if( crash(ball,board) ){// 碰撞了挡板
                // 碰撞了挡板,速度一定负的
                speedY = -Math.abs( speedY );
            }

            ball.style.top = ball.offsetTop + speedY + "px";

            // 小球水平方向的移动
            if( ball.offsetLeft > boxWidth - ballWidth ){
                speedX *= -1;
            }if( ball.offsetLeft < 0 ){
                speedX *= -1;
            }
            ball.style.left = ball.offsetLeft + speedX + "px";


            // 判断每个砖块是否跟球碰撞了
            // console.log( bricks_box.children );// 拿到的砖块

            for(var j = 0; j < bricks_box.children.length; j++ ){
                if( crash(ball, bricks_box.children[j] ) ){
                    speedY *= -1;
                    // 清除当前被碰的砖块
                    bricks_box.children[j].remove();

                    break;
                }
            }
        },15);


        // 给挡板设置拖拽事件,但是水平方向上移动
        board.onmousedown = function( e ){
            var e = e || window.event;
            // 记录当前按下的时候,鼠标在挡板里面的坐标位置
            var startX = e.offsetX;
            
            // 绑定鼠标移动事件
            document.onmousemove = function( evt ){
                var evt = evt || window.event;
                // 求出挡板移动后的距离
                var moveX = evt.pageX - box.offsetLeft - boardWidth/2;

                // 判断边界
                if( moveX < 0 ){
                    moveX = 0;
                }else if( moveX > boxWidth - boardWidth ){
                    moveX = boxWidth - boardWidth ;
                }
                board.style.left = moveX + "px";
            } 
        }

        // 砖块层
        var bricks_box = document.querySelector(".bricks_box");

        // 生成砖块的函数
        function createBricks( n ){
            for(var i = 1; i <= n; i++ ){
                var newBrick = document.createElement("div");
                newBrick.className = "brick";
                bricks_box.appendChild( newBrick );

                // console.log( newBrick );// newBrick它是一个DOM对象,它就具有DOM对象的方法和属性

                // 可以通过这个DOM拿到左偏移量和上偏移量
                // console.log( newBrick.offsetLeft , newBrick.offsetTop );
                // console.log("");

                newBrick.style.left = newBrick.offsetLeft + "px";
                newBrick.style.top = newBrick.offsetTop + "px";
            }

            // 等所有砖块都添加完毕以后,再单独给每个砖块加绝对定位
            for(var j = 0; j < bricks_box.children.length; j++  ){
                bricks_box.children[j].style.position = "absolute";
            }
        }
        // 调用生成砖块的函数
        createBricks( 108 );

        // 鼠标弹起
        document.onmouseup = function(){
            // 解绑鼠标移动事件
            document.onmousemove = null;
        }

        // 封装一个函数,检测两个对象是否碰撞了,返回布尔值; 碰撞返回true,没碰撞返回false
        function crash(node1 , node2 ){
            // 先获取第一个节点的边界
            var l1 = node1.offsetLeft;
            var r1 = node1.offsetLeft+node1.offsetWidth;
            var t1 = node1.offsetTop;
            var b1 = node1.offsetTop+node1.offsetHeight;

            // 再获取第二个节点的边界
            var l2 = node2.offsetLeft;
            var r2 = node2.offsetLeft+node2.offsetWidth;
            var t2 = node2.offsetTop;
            var b2 = node2.offsetTop+node2.offsetHeight;

            if( l2 > r1 || l1 > r2 || t2 > b1 || t1 > b2 ){// 不碰撞的情况
                return false;
            }else{
                return true;
            }
        }
    </script>
</body>
</html>